<template>
	<view class="warranty-result-wrap">
		<image class="header-img" src="/static/images/1_r1_c1.jpg"></image>
		
		<view class="content">
			<view class="content-cell">
				<view class="content-cell-label">货品编码：</view>
				<view class="content-cell-control">{{warrantyInfo.goodsNo}}</view>
			</view>
			<view class="content-cell">
				<view class="content-cell-label">产品名称：</view>
				<view class="content-cell-control">{{warrantyInfo.goodsName}}</view>
			</view>
			<view class="content-cell">
				<view class="content-cell-label">购买时间：</view>
				<view class="content-cell-control">{{warrantyInfo.tradeTime}}</view>
			</view>
			<view class="content-cell">
				<view class="content-cell-label space-10">订单号</view>
				<view class="content-cell-label">：</view>
				<view class="content-cell-control">{{warrantyInfo.sourceTradeNos}}</view>
			</view>
			<!-- <view class="content-cell">
				<view class="content-cell-label space-10">购买</view>
				<view class="content-cell-label space-4">ID：</view>
				<view class="content-cell-control">{{warrantyInfo.tradeNo}}</view>
			</view> -->
			<view class="content-cell">
				<view class="content-cell-label">购买店铺：</view>
				<view class="content-cell-control">{{warrantyInfo.shopName}}</view>
			</view>
			<view class="content-cell">
				<view class="content-cell-label">质保期限：</view>
				<view class="content-cell-control">{{warrantyInfo.warranty_period}}</view>
			</view>
		</view>
		<text class="tips">（注：此电子质保单为商品售后服务之凭证，请予以保留）</text>
		
		<view class="rich-ad" v-if="is_show">
			<rich-text :nodes="adNode"></rich-text>
		</view>
		
		<image class="footer-img" src="/static/images/1_r7_c2.jpg"></image>
		
		<view class="customer-icon" @tap="goGoodCall">
			<text class="iconfont icon-ic_customerservice fs-40"></text>
			<text class="fs-18">客服</text>
		</view>
		<view class="goback-icon" @tap="goTop">
			<text class="iconfont icon-ic_up2 fs-40"></text>
			<text class="fs-18">置顶</text>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	import { getOrderByQrcode, getAdDetail } from '@/api/unicode.js';
	import { getWarrantyCertificate } from '@/api/warranty.js';
	export default {
		name: "UniqueCodeResult",
		data() {
			return {
				adNode: "",
				is_show: 0,
				warrantyInfo: {},
				serialId: undefined
			};
		},
		computed: {
		  ...mapGetters({
		    isLogin: 'isLogin'
		  })
		},
		mounted() {
			this.getNode();
		},
		onLoad(options) {
			const serialId = options?.serialId;
			
			if(serialId) {
				this.serialId = serialId;
			}
		},
		onShow() {
			if(this.isLogin === false) {
				toLogin();
			} else if(this.serialId && !this.warrantyInfo.serialId) {
				this.init(this.serialId)
			}
			
		},
		methods: {
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			goGoodCall() {
				let userInfo = uni.getStorage("USER_INFO")
				// let url = `/pages/extension/customer_list/chat?productId=${this.id}`
				// let obj = {
				// 	store_name: this.storeInfo.store_name,
				// 	path: `/pages/goods_details/index?id=${this.storeInfo.id}`,
				// 	image:this.storeInfo.image
				// }
				this.$util.getCustomer(userInfo, null, null, 0)
			},
			getNode() {
				getAdDetail({id: 3}).then((res) => {
					if(res?.status === 200 && res?.data) {
						this.adNode = res?.data?.content;
						this.is_show = res?.data?.is_show;
					}
				}).catch((msg) => {
					this.is_show = 0;
				});
			},
			init(serialId) {
				getOrderByQrcode({serialNo: serialId}).then((res) => {
					if(res?.status === 200 && res?.data) {
						this.warrantyInfo = res?.data[0];
					} else {
						uni.showToast({
							icon: 'error',
							title: "唯一码无效！"
						})
					}
				}).catch((msg) => {
					uni.showToast({
						icon: 'error',
						title: msg && typeof msg === "string" ? msg : "唯一码无效！"
					})
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		.rich-ad {
			margin: 40rpx;
		}
		.warranty-result-wrap {
			min-height: 100vh;
			background: url("@/static/images/1_r3_c1.jpg");
			background-size: contain;
			padding-bottom: 50rpx;
			border-bottom: 16rpx solid #86151a;
			background-color: #86151a !important;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
		
		.header-img {
			height: 168rpx;
			width: 750rpx;
		}
		
		.space-10 {
			letter-spacing: 10rpx;
		}
		
		.content {
			padding: 60rpx 60rpx 0;
			
			&-cell {
				display: flex;
				align-items: center;
				line-height: 84rpx;
				border-bottom: 1rpx dashed #ddd;
				
				&-label {
					color: #666;
					font-weight: 200;
				}
				
				&-control {
					color: #86151a;
				}
			}
		}
		
		.tips {
			display: block;
			color: #666;
			font-size: 18rpx;
			font-weight: 200;
			text-align: center;
			margin: 10rpx auto 40rpx;
		}
		
		.get-btn {
			font-size: 14px;
			border-radius: 4rpx;
			margin: 0 auto;
			width: 340rpx;
			padding: 8rpx 0;
			color: #fff;
			background-color: #86151a;
			border: 2rpx solid #86151a;
		}
		
		.footer-img {
			display: block;
			height: 564rpx;
			width: 650rpx;
			margin: 80rpx auto 0;
		}
	}
	
	.customer-icon {
		position: fixed;
		bottom: 280rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
	.goback-icon {
		position: fixed;
		bottom: 160rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
</style>